import type {ResourceLibraryType} from "@/components/ResourceLibrary/config";
import {ElMessageBox} from "element-plus";
import {h, defineAsyncComponent, VNode, ComponentInternalInstance} from "vue";
import bus from "@/units/bus"

/**
 * 函数方式调用资源库
 * @param type 资源类型
 * @param choice 选择回调
 * @param limit
 */
export function useResource(type: ResourceLibraryType, choice: (res: any[]) => void, limit: number = 15): Promise<Boolean> {
    return new Promise(resolve => {
        ElMessageBox({
            message: h(defineAsyncComponent(() => import("@/components/ResourceLibrary/Index.vue")), {
                type, onChoice: (res: any[]) => choice(res), limit
            }),
            showCancelButton: false,
            showConfirmButton: false,
            closeOnPressEscape: false,
            closeOnClickModal: false,
            customStyle: {"max-width": "717px"},
            customClass: "popup-component"
        }).then(() => resolve(true)).catch(e => resolve(false))
    })
}

/**
 * 函数式组件调用弹窗
 */
export function usePopupComponent(title: string | undefined, component: VNode, width: string = '640px', showClose: boolean = true): Promise<Boolean> {
    return new Promise(resolve => {
        ElMessageBox({
            title: title ? title : undefined,
            message: component,
            showClose: showClose,
            showCancelButton: false,
            showConfirmButton: false,
            closeOnPressEscape: false,
            closeOnClickModal: false,
            customStyle: {"max-width": width},
            customClass: "popup-component"
        }).then(res => resolve(true)).catch(e => resolve(false))
    })
}


/**
 * 弹出打印JSON
 * @param json
 * @param width
 */
export function usePrintJson(json: Object, width: string = '720px'): Promise<boolean> {
    return new Promise(resolve => {
        ElMessageBox({
            title: "Json查看器",
            // @ts-ignore
            message: h(defineAsyncComponent(() => import("vue-json-viewer")), {
                value: json
            }),
            showCancelButton: false,
            showConfirmButton: false,
            closeOnPressEscape: false,
            closeOnClickModal: false,
            customStyle: {
                "max-width": width
            },
            customClass: "popup-component"
        }).then(res => resolve(true)).catch(e => resolve(false))
    })
}

/**
 * 弹出表单类型
 */
type usePopupFormParam = {
    api: string
    query?: { [key: string]: any },
    onReload?: (instance: ComponentInternalInstance) => void
    successTips?: Boolean,
    onSuccess?: Function,
    onChange?: (field: string, value: any, rule: any[], fApi: object, setFlag: boolean) => void
    onClose?: () => void
    onThen?: () => void
    onCatch?: () => void
    width?: string
}


/**
 * 打开弹出层表单
 * @param param
 */
export function usePopupForm(param: usePopupFormParam): void {
    //获取到的表单实例
    let FormInstance: ComponentInternalInstance | null = null
    ElMessageBox({
        message: h(defineAsyncComponent(() => import("@/components/DynamicForm/FormComponent.vue")),
            {
                api: param.api,
                query: param.query ? param.query : {},
                popup: true,
                // @ts-ignore
                successTips: typeof param.successTips === 'undefined' ? true : param.successTips,
                onChange(field: string, value: any, rule: any[], fApi: object, setFlag: boolean) {
                    if (param.onChange) param.onChange(field, value, rule, fApi, setFlag)
                },
                onReload(instance: ComponentInternalInstance) {
                    FormInstance = instance
                },
                onClose() {
                    if (param.onClose) param.onClose()
                },
                onSuccess(event: any) {
                    if (param.onSuccess) param.onSuccess(event)
                }
            }
        ),
        showCancelButton: true,
        cancelButtonText: "取消",
        confirmButtonText: "提交",
        showConfirmButton: true,
        closeOnPressEscape: false,
        closeOnClickModal: false,
        showClose: false,
        customStyle: {"max-width": param.width ? param.width : '560px'},
        beforeClose: (action, instance, done) => {
            if (action === 'cancel') {
                done()
                if (param.onClose) param.onClose()
            } else if (action === 'confirm') {
                FormInstance?.exposed?.submitData()//执行组件内方法
            }
        },
        customClass: "popup-component popup-form"
    }).then(res => {
        if (param.onThen) param.onThen()
    }).catch(e => {
        if (param.onCatch) param.onCatch()
    })
}


/***
 * 打开视频播放弹出层
 */
export function usePopopPlayVideo(src: string) {
    ElMessageBox({
        title: "视频播放",
        message: `<video src="${src}" autoplay controls style="width:534px;"></video>`,
        confirmButtonText: "关闭",
        showConfirmButton: true,
        closeOnPressEscape: false,
        closeOnClickModal: false,
        showClose: false,
        dangerouslyUseHTMLString: true,
        customStyle: {"max-width": '560px'},
        customClass: "popup-component"
    }).then(res => {

    }).catch(e => {

    })
}


/**
 * 图片预览
 * @param images
 */
export function usePreviewImages(images: string | string[]) {
    bus.emit('preview-img', typeof images === 'string' ? [images] : images)
}